<template>
  <div class="dashboard-container">
    <div class="app-container">组题列表</div>
    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="编号" width="200px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组题时间" width="180px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="100px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试题ID" width="210px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.questionIDs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答题进度" width="90px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.progressOfAnswe }}</span>
        </template>
      </el-table-column>
      <el-table-column label="正确率" width="100px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.accuracyRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答题总耗时（秒）" width="150px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.totalSeconds }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组题类型/详情" width="150px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.questionType }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="removeRandoms(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsRandoms',
  data() {
    return {
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      dataList: [],
      // listLoading: true,
      total: null
    }
  },
  created() {
    this.getrandoms()
  },
  methods: {
    async getrandoms() {
      const { data: res } = await randoms(this.requestParameters)
      this.dataList = res.items
      this.total = res.counts
    },
    removeRandoms(id) {
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              this.$message.success('成功删除')
              this.dataList.splice(id, 1)
              this.getrandoms(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })

        .catch(() => {
          this.$message.info('取消操作')
        })
    }
  }
}
</script>

<style scoped>
.el-table-column {
  text-align: center;
}
.fenye {
  margin-top: 20px;
  text-align: center;
}
</style>
